<template>
  <a-modal width="30%" v-bind:visible="isShowAdd" :title="title" @ok="handleOk" @cancel="onCancel">
    <a-form-model ref="formRef" :rules="ruleForm" :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }">
      <a-form-model-item label="会员手机号" prop="phone">
        <a-input v-model="form.phone"></a-input>
      </a-form-model-item>
      <a-form-model-item label="所属银行" prop="bank_id">
        <a-select v-model="form.bank_id" class="inputStyle" default-value="1" :allowClear="true">
          <a-select-option v-for="item in bankList" :key="item.id" :value="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="银行卡号" prop="bank_num">
        <a-input v-model="form.bank_num"></a-input>
      </a-form-model-item>
      <a-form-model-item label="预留手机号" prop="bank_input_phone">
        <a-input v-model="form.bank_input_phone"></a-input>
      </a-form-model-item>
      <a-form-model-item label="持卡人姓名" prop="bank_input_name">
        <a-input v-model="form.bank_input_name"></a-input>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { getBankListAPI, addPosListAPI } from '@/api/userinfo.js'
export default {
  name: 'AddPos',
  props: {
    isShowAdd: {
      type: Boolean,
      default: false
    },
    object: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    async isShowAdd(boolean) {
      if (boolean) {
        this.getBankList()
        if (Object.values(this.object).length > 0) {
          console.log(this.object)
          this.title = '修改'
          this.form.ids = this.object.id
          this.form.phone = this.object.phone
          this.form.bank_id = this.object.bank_id
          this.form.bank_num = this.object.bank_num
          this.form.bank_input_phone = this.object.bank_input_phone
          this.form.bank_input_name = this.object.bank_input_name
        } else {
          this.form = {
            brand_id: process.env.VUE_APP_BRAND_ID,
            ids: '',
            phone: '', // 会员手机号
            bank_id: '', // 银行名称
            bank_num: '', //银行卡号
            bank_input_phone: '', //预留手机号
            bank_input_name: '' // 持卡人姓名
          }
          this.title = '添加'
        }
      }
    }
  },
  data() {
    return {
      bankList: [],
      title: '',
      form: {
        bank_id: '',
        bank_input_name: '', //持卡人姓名
        bank_input_phone: '', // 预留手机号
        bank_num: '', // 银行卡号
        brand_id: process.env.VUE_APP_BRAND_ID,
        ids: '',
        phone: '' // 会员手机号
      },
      ruleForm: {
        phone: [{ required: true, message: '请输入会员手机号' }],
        bank_id: [{ required: true, message: '请选择银行' }],
        bank_num: [{ required: true, message: '请输入银行卡号' }],
        bank_input_phone: [{ required: true, message: '请输入银行预留手机号' }],
        bank_input_name: [{ required: true, message: '请输入银行卡户名' }]
      }
    }
  },
  methods: {
    async getBankList() {
      const { data } = await getBankListAPI({ brand_id: process.env.VUE_APP_BRAND_ID })
      this.bankList = data
    },
    handleOk() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return
        try {
          await addPosListAPI(this.form)
          this.$emit('upload')
          this.$emit('update:isShowAdd', false)
          this.$emit('update:object', {})
          this.$refs.formRef.resetFields()
          this.$message.success('操作成功')
        } catch (error) {
          this.$message.success(error.data.msg)
        }
      })
    },
    onCancel() {
      this.$emit('update:isShowAdd', false)
      this.$emit('update:object', {})
      this.$refs.formRef.resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-form-item {
  margin: 0;
}
</style>
